﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" >
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="../css/uftestsuite.css" type="text/css" />
  <script type="text/javascript" src="human-machine-date.js"></script>
  <script type="text/javascript">
    		
  		function checkDates( valueid, languageid ) {
  			elt1 = document.getElementById(valueid);
  			elt2 = document.getElementById(languageid);
  			
  			humanMachineDate = new HumanMachineDate( elt1.value, elt2.options[elt2.selectedIndex].value );
  			alert( humanMachineDate.toString() );
  		}
  		

  </script>
  
  <title>Human and machine readable date pattern</title>
	</head>
<body class="documentation">

  
    
    <h1>Human and machine readable date pattern</h1>
    
    <h2>Introduction</h2>
    <p>This is an experiment date format which is both human and machine 
	readable. It is meant to be used as example of a mixed mode date which could 
	get around some of the issue expressed about the microformats abbr design pattern
	<a href="http://microformats.org/wiki/abbr-design-pattern">
	http://microformats.org/wiki/abbr-design-pattern</a>. This approach is not 
	without its only problems, but it would provide a semantic use of the abbr 
	pattern which should not raise any accessibility concerns.
	    
   
   
   <h2>Convert a human and machine readable date pattern into W3C Note datetime profile</h2>
	    
 
	<form>
		<input id="date1" name="date1" type="text" style="width: 440px" value="Date: 25 January 2008 at 15:30" />
		<select id="language1" name="language1">
				<option value="en">English</option>
				<option value="es">Spanish</option>
				<option value="de">German</option>
				<option value="fr">French</option>
				<option value="zh">Simplified Chinese</option>
			</select>
		<input name="convert" type="button" value="convert" onclick="checkDates('date1','language1')" />
	</form>
	
	<!--
	<h2>Compare</h2>
   	<p>This code takes the two dates and compares them to see if they are equal.  </p>

	<form>
		<input id="date2" name="date2" type="text" style="width: 256px" value="2008-05-30T13:00:00" />
		<input id="date3" name="date3" type="text" style="width: 256px" value="Date: 30 May 2008 at 13:00" />
		<input name="compare" type="button" value="compare" onclick="compareDates('date2','date3')" />
	</form>
	-->
	

	<p>The date test has to conform to pattern set out below</p>
	
	
	
	<h2>Examples of date string format</h2>

<pre>
Date: 25 January 2008
Date: 25 January 2008 at 15:30 
Date: 25 January 2008 at 15:30, Time zone +1:30
</pre>

	<h2>Examples of date string format in HTML</h2>

<pre>
<strong>English</strong>
&lt;abbr class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 January 2008</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 January 2008 at 15:30</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 January 2008 at 15:30, Time zone +1:00</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;

<strong>Spanish</strong>
&lt;abbr lang=&quot;es&quot; class=&quot;dtstart&quot; title=&quot;<strong>Fecha: 25 Enero 2008</strong>&quot;&gt;Enero 25 2008&lt;/abbr&gt;
&lt;abbr lang=&quot;es&quot; class=&quot;dtstart&quot; title=&quot;<strong>Fecha: 25 Enero 2008 a las 15:30</strong>&quot;&gt;Enero 25 08&lt;/abbr&gt;
&lt;abbr lang=&quot;es&quot; class=&quot;dtstart&quot; title=&quot;<strong>Fecha: 25 Enero 2008 a las 15:30, Zona horaria +1:00</strong>&quot;&gt;Enero 25 08&lt;/abbr&gt;

<strong>German</strong>
&lt;abbr lang=&quot;de&quot; class=&quot;dtstart&quot; title=&quot;<strong>Datum: 25 Januar 2008</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr lang=&quot;de&quot; class=&quot;dtstart&quot; title=&quot;<strong>Datum: 25 Januar 2008 um 15:30</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr lang=&quot;de&quot; class=&quot;dtstart&quot; title=&quot;<strong>Datum: 25 Januar 2008 um 15:30, Zeitzone +1:00</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;

<strong>French</strong>
&lt;abbr lang=&quot;fr&quot; class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 janvier 2008</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr lang=&quot;fr&quot; class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 janvier 2008 à 15:30</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;
&lt;abbr lang=&quot;fr&quot; class=&quot;dtstart&quot; title=&quot;<strong>Date: 25 janvier 2008 à 15:30, décalage horaire +1:00</strong>&quot;&gt;Jan 25 08&lt;/abbr&gt;

<strong>Simplified Chinese</strong>
&lt;abbr lang=&quot;zh&quot; class=&quot;dtstart&quot; title=&quot;<strong>日期: 2008年 1月 25日</strong>&quot;&gt;1月25日&lt;/abbr&gt;
&lt;abbr lang=&quot;zh&quot; class=&quot;dtstart&quot; title=&quot;<strong>日期: 2008年 1月 25日 15:30</strong>&quot;&gt;1月25日&lt;/abbr&gt;
&lt;abbr lang=&quot;zh&quot; class=&quot;dtstart&quot; title=&quot;<strong>日期: 2008年 1月 25日 15:30, 時區 +1:00</strong>&quot;&gt;1月25日&lt;/abbr&gt;


</pre>

	<h2>Design rules (Needs extending)</h2>
	<ul>
		<li><strong>MUST</strong> start with the &quot;data prefix&quot;. i.e In English this 
		is &quot;Date:&quot;</li>
		<li>The &quot;data prefix&quot; <strong>MUST </strong>be the first item of the 
		scrub list.</li> 
		<li><strong>MUST</strong> format must follow the pattern order i.e.in 
		English&nbsp; date, month year, time, timezone</li>
		<li><strong>MUST</strong> use the full month name as in the language 
		description</li>
		<li><strong>MUST</strong> use a positive full year number. 2008 <strong>
		SHOULD NOT</strong> be abbreviated to 08</li>
		<li>The time <strong>MUST</strong> use 24 hour clock</li>
		<li>The time <strong>MUST</strong> always contain the number of minutes 
		even if that is zero</li>
		<li>Any date without a time zone segment will be considered to be UTC&nbsp;&nbsp; </li>
		<li>The time zone number <strong>MUST</strong> be prefixed with a + or - 
		symbol </li>
		<li>The time zone number <strong>MUST</strong> contain the number of 
		minutes even if that is zero</li>
	</ul>


	<h2>JSON language descriptions</h2>

<pre>
{
"language-name" : "English", 
"language-codes" : ["en"], 
""pattern": "date,month,year,time,timezone",  
"scrub-terms": ["Date:","at", "Time zone"],
"month-names": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
}

{
"language-name" : "Spanish", 
"language-codes" : ["es"], 
"pattern": "date,month,year,time,timezone",  
"scrub-terms": ["Fecha:","a las", "Zona horaria"],
"month-names": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
}

{
"language-name" : "German", 
"language-codes" : ["de"], 
"pattern": "date,month,year,time,timezone",  
"scrub-terms": ["Datum:","um", "Zeitzone"],
"month-names": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
}

{
"language-name" : "French", 
"language-codes" : ["fr"],
"pattern": "date,month,year,time,timezone",   
"scrub-terms": ["Date:","décalage horaire","à"],
"month-names": ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"]
}

{
"language-name" : "Simplified Chinese", 
"language-codes" : ["zh","zh-cn","zh-sg"],
"pattern": "year,month,date,time,timezone",   
"scrub-terms": ["日期:", "年", "月", "日", "時區"],
"month-names": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
}
</pre>
	
		
	<p>&nbsp;</p>

	<a rel="license" href="license.txt">Some rights reserved</a>
    
    
</body>
</html>
